<template>
    <div class="card-detail" ref="cardDetail">
        <div class="card-detail-content" v-if="detailMsg && Object.keys(detailMsg).length > 0" >
            <div class="card-top-box">
                <div style="height: .23rem;"></div>
                <div class="card-line"></div>
                <div class="card-big-traggle"></div>
            </div>
            <div class="card-navigation displayFlex justifyCtBwt" :class="{'scroll-fix':scrollFix}">
                <span class="iconfont icon-arrows_left" @click="goBack()"></span>
                <span class="detail-store-name">{{detailMsg.pageMsg.storeName}}</span>
                <router-link class="card-navigation-right" :to="{path:'/store',query:{storeId:detailMsg.pageMsg.storeId}}">进店</router-link>
            </div>
            <div class="card-detail-item">
                <div class="card-detail-citem">
                    <div class="line-box-shadow"></div>
                    <div class="displayFlex justifyCtBwt card-detail-time">
                        <span>{{detailMsg.cardMsg.startTime.replace('-','.')}}-{{detailMsg.cardMsg.endTime.replace('-','.')}}</span>
                        <span class="displayFlex flexCenter">
                            <img class="card-many" src="../../assets/images/cardList/card_many.png" alt="">
                            {{detailMsg.cardMsg.scope}}
                        </span>
                    </div>
                    <!--代金券-->
                    <div class="card-detail-price" v-if="detailMsg.cardMsg && detailMsg.cardMsg.ticketType == 1">
                        ￥<span class="card-detail-cashPrice">{{detailMsg.cardMsg.condition.cashPrice}}</span>
                        <span class="card-detail-condition" v-if="detailMsg.cardMsg.condition.limitConsume"><span class="card-detail-ccondition">满{{detailMsg.cardMsg.condition.consumePrice}}减{{detailMsg.cardMsg.condition.cashPrice}}</span></span>
                        <span v-else class="card-detail-condition"><span class="card-detail-ccondition">消费满任意金额可用</span></span>
                    </div>
                    <!--TODO 增值券 暂时没有-->
                    <div class="card-detail-price" v-if="detailMsg.cardMsg && detailMsg.cardMsg.ticketType == 2">
                        <span class="card-detail-cashPrice">{{detailMsg.cardMsg.condition.price}}</span>
                        <span class="card-detail-condition" v-if="detailMsg.cardMsg.condition.limitConsume"><span class="card-detail-ccondition">满{{detailMsg.cardMsg.condition.consumePrice}}赠值{{detailMsg.cardMsg.condition.cashPrice}}</span></span>
                        <span v-else class="card-detail-condition"><span class="card-detail-ccondition">消费满任意金额可用</span></span>
                    </div>
                    <!--折扣券-->
                    <div class="card-detail-price"  v-if="detailMsg.cardMsg && detailMsg.cardMsg.ticketType == 3">
                        享<span class="card-detail-cashPrice">{{detailMsg.cardMsg.condition.discount}}</span>折
                        <span class="card-detail-condition" v-if="detailMsg.cardMsg.condition.limitConsume"><span class="card-detail-ccondition">满{{detailMsg.cardMsg.condition.consumePrice}}享{{detailMsg.cardMsg.condition.discount}}折</span></span>
                        <span v-else class="card-detail-condition"><span class="card-detail-ccondition">消费满任意金额可用</span></span>
                    </div>
                    <!--赠品券-->
                    <div class="card-detail-price"  v-if="detailMsg.cardMsg && detailMsg.cardMsg.ticketType == 4">
                        赠<span class="card-detail-cashPrice">{{detailMsg.cardMsg.condition.gift}}</span>
                        <span class="card-detail-condition" v-if="detailMsg.cardMsg.condition.limitConsume"><span class="card-detail-ccondition">满{{detailMsg.cardMsg.condition.consumePrice}}赠{{detailMsg.cardMsg.condition.gift}}</span></span>
                        <span v-else class="card-detail-condition"><span class="card-detail-ccondition">消费满任意金额可用</span></span>
                    </div>
                    <!--条形码 这里产品要求暂时不显示-->
                    <vue-barcode class="displayFlex flexCenter vue-barcode" v-if="detailMsg.pageMsg.ticketNum && false" :value="detailMsg.pageMsg.ticketNum" displayValue="false">
                        你的手机无法显示此条形码
                    </vue-barcode>
                    <div class="tickit-num-text displayFlex" v-if="false"><span class="flex1 tickit-num-item" v-for="value in detailMsg.pageMsg.ticketNum.toString()">{{value}}</span></div>
                    <div class="displayFlex card-phone-address">
                        <div class="card-address-wrap">
                            <p class="card-store-address positionR">{{detailMsg.pageMsg.stroeLocation}} <router-link :to="{path:'/location',query:{'storeLongitude':detailMsg.pageMsg.longitude,'storeLatitude':detailMsg.pageMsg.latitude}}"><img class="address-icon" src="../../assets/images/cardList/address_icon.png" alt=""></router-link></p>
                            <span class="card-store-discount" v-if="userLocation.longitude || userLocation.latitude ">距您{{descount(detailMsg.pageMsg.latitude,detailMsg.pageMsg.longitude)}}</span>
                        </div>
                        <!--这个电话暂时不要-->
                        <!--<a v-if="detailMsg.pageMsg.phone && Array.isArray(detailMsg.pageMsg.phone)&& detailMsg.pageMsg.phone.length > 0" :href="'tel:'+detailMsg.pageMsg.phone[0]" class="card-phone-wicon displayFlex flexCenter">-->
                            <!--<span class="iconfont icon-phone"></span>-->
                        <!--</a>-->
                        <!--<a v-else-if="detailMsg.pageMsg.phone && !Array.isArray(detailMsg.pageMsg.phone)" :href="'tel:'+detailMsg.pageMsg.phone" class="card-phone-wicon displayFlex flexCenter">-->
                            <!--<span class="iconfont icon-phone"></span>-->
                        <!--</a>-->
                    </div>
                    <ol class="card-description">
                        <li v-if="detailMsg.pageMsg.remark" v-html="detailMsg.pageMsg.remark"></li>
                    </ol>
                    <div class="sawtooth-wrap">
                    </div>
                </div>
            </div>
            <goods-box
                    v-if="buyShowModule && Object.keys(buyShowModule).length > 0"
                    @clickBoxItem="toGoodsDetail"
                    :goodsBoxsProp="buyShowModule"></goods-box>
            <!--客服-->
            <router-link class="detail-server-wicon" :to="{path:'/im/chat',query:{storeId:detailMsg.pageMsg.storeId}}">
                <img class="detail-server-icon" src="../../assets/images/cardList/detail_server_icon.png" alt="">
            </router-link>
            <goods-detail v-if="showGoodsDetail" :goodsDetailProps="goodsDetailProps"></goods-detail>
        </div>
    </div>
</template>

<script>
    import XLocation from '../../x/XLocation'
    import VueBarcode from 'vue-barcode';
    import common from '../../assets/js/common/commonMethods';
    import GoodsBox from '../../components/commonComponents/boxItem/GoodsBox';
    import GoodsDetail from '../store/components/goods/GoodsDetail';

    export default {
        name: "CardDetail",
        data(){
           return{
               userLocation:{},
               detailMsg:{},// {pageMsg:{},//  cardMsg:{},}
               XLocation:XLocation,
               ticketNum:'',
               buyShowModule:{},
               scrollFix:false,
               common:common,/*公共方法*/
               showGoodsDetail:false,
               goodsDetailProps:{},//商品信息
           }
        },
        mounted(){
            this.getLocation();
            /*先定位，然后再获取用户的地理信息*/
            XLocation.userGetHeSelfLocation();
            setTimeout(()=>{
                this.userLocation = XLocation.getUserLocation();
            },600);
            this.ticketNum = this.$route.query.ticketNum;
            this.initTickDetail();
            this.headerScroll();
        },
        methods:{
            getLocation(){
                /*TODO 暂时没有后台的定位，先放着*/
                XLocation.userGetHeSelfLocation();
                this.userLocation = XLocation.getUserLocation();
            },
            headerScroll(){
                let scrollTop = 0;
                let that = this;
                window.onscroll= function (e) {
                    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    if(scrollTop > 18){
                        that.scrollFix = true;
                    }else{
                        that.scrollFix = false;
                    }
                }
            },
            descount(latitude,longitude){
                let that = this;
                let returnDiscount = parseInt(XLocation.countDistance(latitude,longitude,that.userLocation.latitude,that.userLocation.longitude)) > 1000 ?
                    parseInt(XLocation.countDistance(latitude,longitude,that.userLocation.latitude,that.userLocation.longitude) * 100 /1000 ) / 100 +"km" :
                    parseInt(XLocation.countDistance(latitude,longitude,that.userLocation.latitude,that.userLocation.longitude))+'m';
                return returnDiscount
            },
            initTickDetail(){
                let that = this;
                let url = `${this.NW_API_API_LOCALE_VERSION}/user/ticket/user/${this.userId}/ticket/${this.ticketNum}/detail`;
                let tempDetailMsg = {};
                this.xurl.get(url).then((data)=>{
                    if(data.success){
                        let tempData = data.result;
                        let tempObj = {
                            storeIcon:tempData.storeIcon,//头像
                            templateId:0,
                            state:tempData.state,
                            consume:'',
                            startTime:tempData.startTime,
                            endTime:tempData.endTime,
                            ticketType:tempData.ticketType,
                            scope:tempData.scope,
                            canUseItemIds:tempData.canUseItemIds,//为空时表示所有商品可用
                            condition:tempData.ticketContent,
                            onlyOfflineUse:tempData.onlyOfflineUse//是否为线下核销，线下核销的时候没有优惠券可用商品
                        };
                        let tempDetailObj = {
                            stroeLocation:tempData.location,
                            phone:tempData.phones,
                            remark:tempData.remark,
                            longitude:tempData.longitude,
                            latitude:tempData.latitude,
                            ticketNum:tempData.ticketNum,
                            storeName:tempData.storeName,
                            storeId:tempData.storeId,
                        };
                        tempDetailMsg = {
                            pageMsg:tempDetailObj,
                            cardMsg:tempObj
                        };
                        this.detailMsg = tempDetailMsg;
                        if(!tempDetailMsg.cardMsg.onlyOfflineUse){
                            this.initUseTitickGoods();
                        }
                    }else if(data.errMsg){
                        this.$root.$emit('toast', {msg: data.errMsg});
                    }else{
                        this.$root.$emit('toast', {msg:"获取信息失败"});
                    }
                })
            },
            initUseTitickGoods(){
                let url = `${this.NW_API_API_LOCALE_VERSION}/item/list/user/ticket/query`;
                let that = this;
                let params = {
                    "pageNum":1,
                    "pageSize":10,
                    "userId": that.userId,                 //---------用户id
                    "storeId": that.detailMsg.pageMsg && that.detailMsg.pageMsg.storeId,                 //---------店铺ID
                    "allItemCanUse":!that.detailMsg.cardMsg.canUseItemIds || !that.detailMsg.cardMsg.canUseItemIds.length,          //--------是否店铺所有商品可用
                    "canUseItemIds": that.detailMsg.cardMsg && Array.isArray(that.detailMsg.cardMsg.canUseItemIds)  && that.detailMsg.cardMsg.canUseItemIds.length > 0 ? that.detailMsg.cardMsg.canUseItemIds : null     //---------可用商品列表,所有商品可用时不传
                };
                this.xurl.postDataJson(url,params).then((data)=>{
                    if(data.success){
                        let tempBuyShowModule = {};
                        let tempList = [];
                        for(let value of data.list){
                            tempBuyShowModule={
                                currency:value.currency || '￥',/*金币的符号*/
                                url:value.images[0],/*@url 图片或者视频的url*/
                                itemTitle:value.itemTitle,/*@description 描述*/
                                price:value.price,/*@description 价格*/
                                buyerNum:value.buyerNum,/*@buyerNum 已购买件数*/
                                itemId:value.itemId,
                                goodsId:value.itemId,
                                storeId:that.detailMsg.pageMsg && that.detailMsg.pageMsg.storeId
                            };
                            tempList.push(tempBuyShowModule);
                        }
                        this.buyShowModule = {
                            title:'可用券商品',
                            list:tempList,
                            isNeedScroll: false,//是否需要滚动条
                        }
                    }else if(data.errMsg){
                        this.$root.$emit('toast', {msg: data.errMsg});
                    }else{
                        this.$root.$emit('toast', {msg:"获取可用捐商品列表失败"});
                    }

                });
            },
            toGoodsDetail(obj){
                this.$router.push({path:'/store',query:{shareId:obj.goodsId,menuType:3,storeId:obj.storeId}});
                // http://test.haokanhaowan.cn/store?storeId=833&promotionId=583&page=goods
            },
            /*这个先保留需求可能会改成这个，拉取上品详情页面*/
            toGoodsDetailSave(itemId){
                let that = this;
                let url = `${this.NW_API_API_LOCALE_VERSION}/item/${itemId}/detail`
                this.xurl.getLoading(url).then((data)=>{
                    if(data.success){
                        let value = data.result;
                        let tempObj = {
                            storeId:that.detailMsg.pageMsg.storeId,
                            itemCode:value.itemCode,
                            itemId:value.item,
                            title:value.title,
                            currency:value.priceUnit || '￥',
                            price:value.price,//商品价格
                            description:'商品详情',//商品描述
                            imgList:value.cycleImgs,//商品详情轮播图的图片，
                        };
                        that.goodsDetailProps = tempObj;
                        that.showGoodsDetail = true;
                    }else if(data.errMsg){
                        this.$root.$emit({msg:data.errMsg})
                    }else{
                        this.$root.$emit({msg:data.errMsg})
                    }
                })
                this.showGoodsDetail = true;
            },
            goBack() {
                if(window.history.length > 0){
                    this.$router.go(-1)
                }else{
                    this.$router.push({path:'/home'})
                }
            }
        },
        components:{
            'vue-barcode':VueBarcode,
            'goods-box':GoodsBox,
            'goods-detail':GoodsDetail,
        }
    }
</script>

<style scoped lang="scss">
    @import url($css_root + 'css/swiper.min.css');
    .card-detail{
        width: 100%;
        overflow: hidden;
        background-color: #F2F2F2;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .card-detail /deep/{
        .buy-user-left{
            font-size: .12rem;
        }
        .buy-user-right{
            font-size: .1rem;
            opacity: .6;
        }
    }
    .card-detail-content{
        background-color: #fcfcfc;
    }
    .card-store-discount{
        color: #999;
        display: inline-block;
        font-size: .11rem;
        padding-top: .05rem;
    }
    .card-store-address{
        color: #666;
        font-size: .13rem;
        max-width: 100%;
        text-overflow:ellipsis ;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        letter-spacing: .01rem;
        min-height: .24rem;
        padding-right: .24rem;
    }
    .address-icon{
        width: .24rem;
        right: 0;
        bottom: 0;
        margin: auto;
        top: 0;
        position: absolute;

    }
    .card-address-wrap{
        -webkit-flex: 1;
        flex: 1;
    }
    .card-phone-wicon{
        width: .44rem;
        height: .44rem;
        background-color: #E8EEFB;
        border: .07rem solid #F3F6FD;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-right: .27rem;
        .icon-phone{
            color: #8BA9E8;
            font-size: .2rem;
        }
    }
    .card-phone-address{
        padding: .35rem .1rem .5rem;
    }
    .card-navigation{
        width: 100%;
        height: .5rem;
        line-height: .5rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 .15rem;
        font-size: .16rem;
        color: #fff;
        position: absolute;
        left:0;
        top: .18rem;
        z-index: 10;
    }
    .card-navigation-right{
        color: #fff;
        font-size: .14rem;
    }
    .scroll-fix{
        background-color: #fff;
        position: fixed;
        top: 0;
        .icon-arrows_left{
            color: #1A1A1A;
        }
        .detail-store-name{
            color: #1A1A1A;
        }
        .card-navigation-right{
            color: #6596FF;
        }
    }
    .icon-arrows_left{
        font-size: .2rem;
    }

    .card-top-box{
        padding-top: .35rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-color: #6696FF;
        height: 1rem;
        width: 100%;
        position: relative;
    }
    .card-line{
        width: 3.55rem;
        height: .1rem;
        margin-left: .1rem;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        background-color: #264EA6;
        margin-top: .1rem;
    }
    $height : .5rem;
    $height1 : 1.88rem;
    .card-big-traggle{
        /*width: 3.75rem;*/
        /*height: 1rem;*/
        position: relative;
        bottom: -.22rem;
        left: 0;
        border-left:$height1 solid transparent ;
        border-right:$height1 solid transparent ;
        border-top:$height solid #6696FF ;
        border-bottom:$height solid transparent ;
    }
    .card-detail-item{
        padding: 0 .15rem;
        background-color: #FCFCFC;
        padding: 0 .15rem;
    }
    .card-detail-citem{
        box-shadow: 0 .05rem .05rem 0 #ccc;
        padding-top: .15rem;
        background-color: #fff;
        position: relative;
        top: -.28rem;
        z-index: 1;
    }
    .line-box-shadow{
        position: absolute;
        z-index: 1;
        width: 100%;
        height:1px;
        top: 0;
        left: 0;
        -webkit-box-shadow: 0 .1rem .1rem 0 #DAE3F7;
        box-shadow:  0 .1rem .1rem 0 #DAE3F7;
    }
    .card-description{
        color: #999;
        font-size: .12rem;
        padding: .14rem .1rem .2rem;
        line-height: .25rem;
        min-height: 1.24rem;
    }
    .sawtooth-wrap{
        background-color: transparent;
        position: absolute;
        bottom: -.2rem;
        transform: rotate(180deg);
        background-image: linear-gradient(45deg,#fff  25%, transparent 25%), /*左侧黄色（#ff0）锯齿*/
        linear-gradient(-45deg,#fff 25%, transparent 25%); /*右侧绿色（#0f0）锯齿*/
        background-size: .15rem .15rem;
        background-repeat: repeat-x;/*X轴水平方向重复*/
        background-position: 0 100%;/*锯齿显示在页面最底部*/
        width: 100%;
        height: .2rem;
        line-height: .2rem;
        color: #fff;
        text-align: center;
    }
    .card-many{
        width: .28rem;
        padding-right: .05rem;

    }
    .card-detail-time{
        padding: 0 .15rem;
        font-size: .12rem;
        color: #666666;
    }
    .card-detail-price{
        color: #FF4040;
        font-size: .22rem;
        text-align: center;
        padding-bottom: .3rem;
    }
    .card-detail-cashPrice{
        font-size: .68rem;
    }
    .card-detail-condition{
        display: block;
        text-align: center;
        font-size: .11rem;
        color: #CCCCCC;
        .card-detail-ccondition{
            color: #333;
            font-size: .12rem;
            padding: .05rem .2rem;
            -webkit-border-radius: .25rem;
            -moz-border-radius: .25rem;
            border-radius: .25rem;
            border: 1px solid #ccc;
        }
    }
    .detail-server-wicon{
        width: .45rem;
        height: .45rem;
        display: inline-block;
        position: fixed;
        right: .15rem;
        bottom: 10%;
        z-index: 10;
        border-radius: 50%;
        .detail-server-icon{
            width: 100%;
        }
    }
    .tickit-num-text{
        padding: 0 .3rem;
        .tickit-num-item{
            text-align: center;
        }
    }
</style>